<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ message }}
    <br>
    {{ message.split('').reverse().join('-') }}
    <br>
    {{ reversedMessage }}
    <br>
    {{ reversedMessage }}
    <br>
    {{ reversedMessage }}
    <br>
    {{ reversedMessage }}
    <br>
    {{ reversedMsg() }}
    <br>
    {{ reversedMsg() }}
    <br>
    {{ reversedMsg() }}
    <br>
    <button @click="reversedMessage = 'abc'">修改计算属性</button>
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      },
      computed: { // 计算属性
        reversedMessage() { // 相当于是 reversedMessage 属性 getter 方法的简写形式
          console.log('计算属性')
          return this.message.split('').reverse().join('*')
        },
        // reversedMessage: {
        //   get() { // getter，用于获取属性值
        //     console.log('getter...')
        //     return this.message.split('').reverse().join('*')
        //   },
        //   // set(val) { // setter，用于设置属性值，如 obj.property = value
        //   //   console.log('setter')
        //   //   this.message = '修改后：' + val
        //   // }
        // }
      },
      methods: {
        reversedMsg() {
          console.log('方法')
          return this.message.split('').reverse().join('-')
        }
      }
    })
  </script>
</body>
</html>